<template>
  <a-scrollbar>
    <a-form
      v-model="config"
      size="mini"
      label-align="right"
      layout="horizontal"
      :label-col-props="labelColProps"
      :wrapper-col-props="wrapperColProps"
    >
      <a-form-item
        field="model"
        tooltip=""
        label="组件类型"
      >
        <a-tag color="pinkpurple" bordered>
          {{ config.name }}
        </a-tag>
      </a-form-item>
      <a-form-item
        field="model"
        tooltip=""
        label="组件ID"
      >
        <a-input v-model="config.id" readonly />
      </a-form-item>
      <a-form-item
        field="align"
        tooltip=""
        label="栅格间隔"
      >
        <a-input-number
          v-model="config.config.gutter"
          mode="button"
          allow-clear
          :max="99999"
          :min="0"
        />
      </a-form-item>
      <a-form-item
        field="justify"
        tooltip=""
        label="水平对齐方式"
      >
        <a-select
          v-model="config.config.justify"
          popup-container="#ItemSetting"
        >
          <a-option value="start">start</a-option>
          <a-option value="center">center</a-option>
          <a-option value="end">end</a-option>
          <a-option value="space-around">space-around</a-option>
          <a-option value="space-between">space-between</a-option>
        </a-select>
      </a-form-item>
      <a-form-item
        field="align"
        tooltip=""
        label="竖直对齐方式"
      >
        <a-select
          v-model="config.config.align"
          popup-container="#ItemSetting"
        >
          <a-option value="start">start</a-option>
          <a-option value="center">center</a-option>
          <a-option value="end">end</a-option>
          <a-option value="stretch">stretch</a-option>
        </a-select>
      </a-form-item>
      <a-form-item
        field="wrap"
        tooltip=""
        label="是否支持换行"
      >
        <a-switch
          v-model="config.config.wrap"
          type="round"
        >
          <template #checked>
            是
          </template>
          <template #unchecked>
            否
          </template>
        </a-switch>
      </a-form-item>
    </a-form>
    <a-divider style="border-bottom-style: dotted" orientation="center" :size="2" :margin="0" />
    <br />
    <a-form
      v-model="config"
      size="mini"
      label-align="right"
      layout="vertical"
      :label-col-props="labelColProps"
      :wrapper-col-props="wrapperColProps"
    >
      <a-form-item
        field="wrap"
        tooltip=""
        label="栅格列配置"
      >
        <a-layout>
          <a-space direction="vertical" :size="10" style="display: block;">
            <template v-for="item in config.formList" :key="item.id">
              <a-row justify="space-between">
                <a-col :span="6">
                  <a-tag color="arcoblue">
                    {{ item.id }}
                  </a-tag>
                </a-col>
                <a-col :span="12">
                  <a-input-number
                    v-model="item.config.span"
                    mode="button"
                    :max="24"
                    :min="1"
                  >
                    <template #prefix>
                      宽度
                    </template>
                  </a-input-number>
                </a-col>
                <a-col :span="2">
                  <a-button status="danger" @click.stop="deleteCol(item.id)">
                    <template #icon>
                      <icon-delete />
                    </template>
                  </a-button>
                </a-col>
              </a-row>
            </template>
            <a-button type="primary" style="width: 100%;" @click.stop="addCol">
              <template #icon>
                <icon-plus />
              </template>
              增加栅格列
            </a-button>
          </a-space>
        </a-layout>
      </a-form-item>
    </a-form>
  </a-scrollbar>
</template>

<script lang="ts" setup>
import { defineModel } from 'vue';
import { uniqueId, cloneDeep } from 'lodash';
import { Message } from '@arco-design/web-vue';

import { BASE_GRID_COL_CONFIG } from '@/components/form-design/item-select/config/config';
import { labelColProps, wrapperColProps } from '../config';

const config = defineModel('config', { type: Object, default: { formList: [] } });

const deleteCol = (id: string) => {
  if (config.value.formList.length === 1) {
    Message.warning('最后一个不可删除');
    return;
  }
  config.value.formList = config.value.formList.filter((item: { id: string; }) => item.id !== id);
};

const addCol = () => {
  const col = cloneDeep(BASE_GRID_COL_CONFIG);
  col.id = uniqueId(`${col.type}_`);
  config.value.formList.push(col);
};
</script>

<script lang="ts">
export default {
  name: 'GridRowSetting'
};
</script>

<style lang="less" scoped>

</style>